<template>
	<div>
		<bread-crumb refresh @actRefresh="getDataList">
			<template slot="title">系统配置</template>
		</bread-crumb>

		<el-table :data="dataList" size="" v-loading="loading" border style="width:100%">
			<el-table-column prop="k" label="配置项" width=""></el-table-column>
			<el-table-column prop="v" label="值"></el-table-column>
			<el-table-column prop="introduction" label="说明"></el-table-column>
			<el-table-column prop="updateTime" label="更新时间" ></el-table-column>
			<el-table-column label="操作" >
				<template slot-scope="scpoe">
					<el-button size="small"  type="primary" @click="edit(scpoe.row)">修改</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="hidden-xs">
			<el-pagination
				background
				:pager-count="pagerCount"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalCount">
			</el-pagination>
		</div>
		<div class="visible-xs">
			<el-pagination
				background
				:pager-count="pagerCount"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page"
				layout="pager"
				:total="totalCount">
			</el-pagination>
		</div>
	</div>
</template>

<script>

import { mixins } from '@/mixins/mixins.global';
import { mixinUtils } from '@/mixins/mixins.utils';
import breadCrumb from '@/views/components/breadCrumb';
import { apiSystemConfigList, apiSystemConfigUpdate } from '@/axios/api.system';
export default {
	name: 'systemConfig',
	mixins:[mixins,mixinUtils],
	components:{breadCrumb},
	data() {
		return {
			//原始值
			pagerCount: 5,//饿了么垃圾分页的页块显示
			page      : 1,
			pageSize  : 40,
			totalCount: 0,//总记录数
			//复杂值
			dataList: [],
		}
	},
	mounted() {
	},
	created() {
		this.getDataList()
	},
	methods:{
		getDataList(){
			apiSystemConfigList({
				pageSize: this.pageSize,
				page    : this.page,
			}).then((res) => {
				this.totalCount = res.count
				if (res.data.length > 0) {
					this.dataList = res.data
				} else {
					this.dataList = []
				}
			})
		},

		//编辑
		edit(data) {
			console.log('要编辑的数据'+JSON.stringify(data))
			this.$prompt('修改['+data.k+']的值', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern: /^[0-9]+.?[0-9]*$/,
				inputErrorMessage: '请输入正确内容',
				inputValue:data.v,
			}).then(({ value }) => {
				apiSystemConfigUpdate({
					key:data.k,
					value:value
				}).then((res)=>{
				    if(res.resultFlag==true){
				    	this.getDataList();
					    this.$message({message:res.resultMsg,type:"success"})
				    }else{
					    this.$message.error(res.resultMsg)
				    }
				})
			}).catch(() => {

			});
		},


		handleSizeChange (val) {
			console.log('改变每页数',val)
			this.page = 1 //恢复第一页
			this.pageSize = val
			this.getDataList()
		},
		handleCurrentChange (val) {
			console.log('改变当前页',val)
			this.page = val
			this.getDataList()
		},
	}

};
</script>

<style lang="less">

</style>
